6<!-- 搜索结果页面 -->
<template>
  <div id="search_result">
    <div class="search_content_box">
      <!-- 最佳匹配 -->
      <div class="optimum_box" v-if=" leg > 0 ">
        <p>最佳匹配</p>

        <!-- 歌手 -->
        <div class="optimum_content" v-if="best_match_list.artist">
          <div class="left">
            <div class="img_box">
              <img :src="best_match_list.artist[0].img1v1Url" />
            </div>
            <div class="message_content">
              <p>歌手：{{best_match_list.artist[0].name}}</p>
              <span>
                <span>粉丝 : {{best_match_list.artist[0].fansSize }}</span>
                <span>歌曲 : {{best_match_list.artist[0].musicSize }}</span>
                <span>专辑 : {{best_match_list.artist[0].albumSize}}</span>
              </span>
            </div>
          </div>
          <van-icon name="arrow" color="#ccc" size="18" />
        </div>
        <!-- mv -->
        <div
          class="optimum_content"
          v-if="best_match_list.mv"
          @click="toMvDetails(best_match_list.mv[0].id)"
        >
          <div class="left">
            <div class="img_box">
              <img :src="best_match_list.mv[0].cover" />
            </div>
            <div class="message_content">
              <p>MV：{{best_match_list.mv[0].name}}</p>
              <span>{{best_match_list.mv[0].artistName}}</span>
            </div>
          </div>
          <van-icon name="arrow" color="#ccc" size="18" />
        </div>
        <!-- 专辑 -->
        <div class="optimum_content" v-if="best_match_list.album">
          <div class="left">
            <div class="img_box">
              <img :src="best_match_list.album[0].picUrl" />
            </div>
            <div class="message_content">
              <p>
                专辑：{{best_match_list.album[0].name}}
                <span
                  v-if="best_match_list.album[0].alias[0]"
                >({{best_match_list.album[0].alias[0]}})</span>
              </p>
              <span>{{best_match_list.album[0].artists[0].name}}</span>
            </div>
          </div>
          <van-icon name="arrow" color="#ccc" size="18" />
        </div>
      </div>

      <!-- 歌曲列表 -->
      <div
        class="song_list"
        v-for="(item,idx1) in song_result"
        :key="idx1"
        @click="getlist(item,idx1)"
      >
        <div class="left">
          <p>{{item.name}}</p>
          <span>{{item.artists[0].name}} - {{item.album.name}}</span>
        </div>
        <van-icon name="play-circle-o" color="#ccc" size="22" />
      </div>

      <div class="load_all">
        <p>已加载全部</p>
      </div>
    </div>
  </div>
</template>

<script>
import { api } from "@/assets/http/api.js";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      song_result: [],
      best_match_list: [],
      leg: 0,
      time: null,
      open: true,
      idx: []
    };
  },
  created() {
    this.$axios(api.get_result_list + this.$route.query.songName).then(res => {
      this.song_result = res.data.result.songs;
    });
    this.$axios(api.get_best_match_list + this.$route.query.songName).then(
      res => {
        this.best_match_list = res.data.result;
        this.leg = this.best_match_list.orders
          ? this.best_match_list.orders.length
          : 0;
      }
    );
    this.time = Date.now();
    this.set_history_search({
      val: this.$route.query.songName,
      time: this.time
    });
  },
  methods: {
    ...mapMutations(["set_history_search", "getUrl" ,"setMusic"]),
    toMvDetails(id) {
      this.$router.push({
        name: "mvDetails",
        query: {
          mvId: id
        }
      });
    },
    getlist(item, index) {
      this.setMusic(true)
      // 点击两次不能重复,第二次进入播放页面
      this.idx.push(index);
      if (this.idx.length == 2) {
        if (this.idx[0] != this.idx[1]) {
          this.open = true;
          this.idx = [];
        } else if (this.idx[0] == this.idx[1]) {
          this.open = false;
          this.idx = [];
        }
      }
      // 如果第一次点击和第二次点击的歌曲不同
      if (this.open) {
        this.$axios(api.playmusic + item.id).then(res => {
          // 字段处理

          let newitem = {};
          newitem.src = res.data.data[0].url;
          newitem.artist = item.artists[0].name;
          newitem.title = item.name;
          newitem.pic = item.album.artist.img1v1Url;
          newitem.id = item.id;
          this.getUrl(newitem);
        });
      } else if (!this.open) {
        // 如果第一次点击和第二次点击的歌曲相同
        this.$store.commit("setMusic", false);
        this.$router.push({
          name: "detail"
        });
      }
    }
  }
};
</script>

<style lang="scss">
* {
  box-sizing: border-box;
  // letter-spacing: 2px;
}
// 最佳匹配
.optimum_box {
  > p {
    text-align: left;
    margin: 15px 0 5px 15px;
    font-size: 13px;
    color: #666;
  }
}
.optimum_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 15px;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  .left {
    height: 50px;
    display: flex;
    align-items: center;
    > .img_box {
      height: 50px;
      max-width: 88px;
      overflow: hidden;
      img {
        height: 100%;
        width: auto;
      }
    }
    .message_content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      margin-left: 10px;
      > p {
        font-size: 16px;
        margin-bottom: 5px;
        max-width: calc(100vw - 148px);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      > span {
        font-size: 12px;
        color: #aaa;
        max-width: calc(100vw - 148px);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}

// 歌曲列表
.song_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  margin: 0 15px;
  padding: 10px 0;
  > .left {
    text-align: left;
    > p {
      font-size: 16px;
      margin-bottom: 4px;
      max-width: calc(100vw - 70px);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    > span {
      font-size: 12px;
      color: #aaa;
      max-width: calc(100vw - 70px);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}

// 已加载全部
.load_all {
  text-align: center;
  > p {
    font-size: 15px;
    letter-spacing: 1px;
    color: #aaa;
    padding: 20px 0;
    margin-bottom: 20px;
  }
}
</style>
